<template>
  <div
    class="songList-detail"
    v-title
    :data-title="$t('router.SongListClassicalTitle')"
  >
    <div class="Breadcrumbback">
      <Breadcrumb></Breadcrumb>
    </div>
    <div class="main">
      <div class="box left">
        <div class="box-top left-top">
          <h5
            class="ellipsis-two"
            :title="$i18n.locale == 'zh' ? list.cname || list.name : list.name"
            v-text="$i18n.locale == 'zh' ? list.cname || list.name : list.name"
          ></h5>
        </div>
        <ul>
          <li>
            <span>{{ $t("main.serial") }}:</span>
            <p
              v-if="list.songSheetId"
              :title="list.songSheetId"
              v-text="list.songSheetId"
            ></p>
            <p v-else v-text="$t('public.noInformation')"></p>
          </li>
          <li>
            <span>{{ $t("main.author") }}:</span>
            <p
              v-if="list.author"
              class="ellipsis"
              :title="list.author"
              v-text="list.author"
            ></p>
            <p v-else v-text="$t('public.noInformation')"></p>
          </li>
          <li class="remarks">
            <span>{{ $t("main.evaluate") }}:</span>
            <p
              class="ellipsis-two"
              :title="list.remarks"
              v-if="list.remarks"
              v-text="list.remarks"
            ></p>
            <p v-else v-text="$t('public.noInformation')"></p>
          </li>
          <li>
            <span>{{ $t("main.singleNumber") }}:</span>
            <p>{{ list.trackCount || $t("public.noInformation") }}</p>
          </li>
          <li>
            <!-- 添加到播放列表 -->
            <el-button
              type="primary"
              size="small"
              class="icon-button"
              @click="openConfirm('addPlayListAll')"
              ><svg-icon name="play-list" class="icon icon-play-list" />{{
                $t("public.addToPlaylist")
              }}</el-button
            >
            <!-- 下载歌单 -->
            <el-button
              type="primary"
              size="small"
              @click="openDialog('downloadAll', list.musicCompositions)"
              ><svg-icon name="download" class="icon icon-download" />{{
                $t("main.downloadSongList")
              }}</el-button
            >
          </li>
          <li>
            <!-- 添加到我喜欢 -->
            <el-button
              type="primary"
              size="small"
              class="icon-button"
              @click="isLikeAlbum($route.params.id, list.likeState)"
            >
              <svg-icon
                :name="list.likeState ? 'is-like' : 'like'"
                class="icon icon-like"
              />
              {{
                list.likeState
                  ? $t("main.haveBeenLike")
                  : $t("main.addToWhatILike")
              }}
            </el-button>
            <!-- 分享 -->
            <el-button type="primary" size="small" @click="openDialog('share')"
              ><svg-icon name="share" class="icon icon-share" />{{
                $t("main.share")
              }}</el-button
            >
          </li>
        </ul>
      </div>
      <div class="box right">
        <div class="box-top right-top">
          <h5>
            <!-- 已选择播放时长： -->
            <span
              >{{ $t("main.selectedPlayingDuration") }}：{{
                utils.formatSecondTime(totalTiming)
              }}</span
            >
          </h5>
          <!-- 添加到单曲夹 -->
          <el-button
            type="primary"
            size="small"
            @click="openDialog('addSingles')"
            >{{ $t("main.addToSingleClip") }}</el-button
          >
          <!-- 添加到播放列表 -->
          <el-button
            type="primary"
            size="small"
            @click="openConfirm('addPlayList')"
            >{{ $t("public.addToPlaylist") }}</el-button
          >
        </div>
        <el-table
          ref="singleTable"
          class="singleTable"
          :data="list.musicCompositions"
          highlight-current-row
          @current-change="handleCurrentChange"
          @selection-change="handleSelectionChange"
          height="94%"
        >
          <el-table-column type="selection" min-width="8%"> </el-table-column>
          <el-table-column min-width="5%">
            <template slot-scope="scope">
              <div
                :class="
                  currentSong.trackId == scope.row.trackId && playing
                    ? 'playing'
                    : ''
                "
              >
                <svg-icon
                  @click="play('pause', scope.row)"
                  name="pause"
                  class="icon icon-pause"
                />
                <svg-icon
                  @click="play('play', scope.row)"
                  name="play"
                  class="icon icon-play"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('main.NOSingleName')"
            min-width="60%"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
              &nbsp;
              <span class="pointer" @click="openWorkName(scope.row.trackId)">
                <svg-icon
                  :name="
                    scope.row.trackId == activeTrackId
                      ? 'on-detail'
                      : 'off-detail'
                  "
                  class="icon icon-off-detail"
                />
                {{
                  $i18n.locale === "zh"
                    ? scope.row.trackCtitle || scope.row.trackTitle
                    : scope.row.trackTitle
                }}
              </span>
              <p
                class="isSingleName"
                v-if="scope.row.musicAlbum"
                v-show="scope.row.trackId == activeTrackId"
                v-text="
                  $i18n.locale === 'zh'
                    ? scope.row.musicAlbum.catalogueCname ||
                      scope.row.musicAlbum.catalogueName
                    : scope.row.musicAlbum.catalogueName
                "
              ></p>
            </template>
          </el-table-column>
          <el-table-column min-width="5%">
            <template slot-scope="scope">
              <svg-icon
                @click="isLikeSingle(scope.row, scope.$index)"
                :name="scope.row.likeState ? 'is-like' : 'like'"
                class="icon icon-like"
              />
            </template>
          </el-table-column>
          <el-table-column min-width="5%">
            <template slot-scope="scope">
              <svg-icon
                @click="openDialog('download', scope.row)"
                name="download"
                class="icon icon-download"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="timing"
            show-overflow-tooltip
            :label="$t('main.duration')"
            min-width="17%"
          ></el-table-column>
        </el-table>
      </div>
    </div>

    <!--弹窗界面-->
    <el-dialog
      :width="isQrcode ? '28%' : '20%'"
      :title="$t(textMap[dialogStatus])"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <!-- 下载弹窗 -->
      <el-form
        v-if="dialogStatus == 'download' || dialogStatus == 'downloadAll'"
        :model="download"
        class="download"
        :rules="rules"
        :ref="dialogStatus"
      >
        <el-form-item :label="$t('public.account')" prop="account">
          <el-input
            v-model="download.account"
            :placeholder="$t('public.enterAccount')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('public.password')" prop="password">
          <el-input
            v-model="download.password"
            show-password
            :placeholder="$t('public.enterPassword')"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 分享 -->
      <ul class="dialogShare" ref="share" v-else-if="dialogStatus == 'share'">
        <li @click="share('weixin')">
          <img src="@/assets/images/wx.png" alt="WeChat" />
        </li>
        <li @click="share('weibo')">
          <img src="@/assets/images/weibo.png" alt="WeiBo" />
        </li>
        <li @click="share('qq')">
          <img src="@/assets/images/qq.png" alt="QQ" />
        </li>
      </ul>
      <!-- 添加到单曲夹 -->
      <el-form
        v-if="dialogStatus == 'addSingles'"
        :model="addSingles"
        class="addSingles"
        :rules="rules"
        ref="addSingles"
      >
        <el-form-item prop="select">
          <el-select
            v-model="addSingles.select"
            clearable
            filterable
            :placeholder="$t('public.selectSingles')"
          >
            <el-option
              v-for="item in options"
              :key="item.dirId"
              :label="item.name"
              :value="item.dirId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="addSingles.select === '0'"
          :label="$t('public.newSingles')"
          prop="name"
        >
          <el-input
            class="input-new-tag"
            v-model="addSingles.name"
            maxlength="20"
            show-word-limit
            :placeholder="$t('main.enterSingleName')"
          ></el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        :class="
          dialogStatus == 'share' ? 'share-dialog-footer' : 'dialog-footer'
        "
      >
        <el-button
          class="clearBtn"
          @click.native="
            dialogFormVisible = false;
            isQrcode = false;
          "
          >{{ $t("public.cancel") }}</el-button
        >
        <el-button type="primary" @click="createData(dialogStatus)">{{
          $t("public.save")
        }}</el-button>
        <!-- <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button> -->
      </div>
      <p class="qrcodeText" v-if="isQrcode">
        <span v-show="qrcodeText === 'wx'">
          {{ $t("main.openWechatScan") }}
        </span>
        <span v-show="qrcodeText === 'qq'">
          {{ $t("main.scanQQ") }}
        </span>
      </p>
      <div id="qrcode" ref="qrcode" v-show="isQrcode"></div>
    </el-dialog>
  </div>
</template>

<script>
import { mapMutations, mapGetters, mapActions } from "vuex";
import Breadcrumb from "@/components/common/Breadcrumb/Index";
import QRCode from "qrcodejs2";
export default {
  data() {
    return {
      list: {},
      totalTiming: 0,
      fullscreenLoading: false,
      // 当前选中行
      currentRow: null,
      multipleSelection: [],
      activeTrackId: -1, //展开workName
      // isWorkName: false, //是否显示名详情
      // el-dialog相关
      textMap: {
        //添加与编辑界面
        downloadAll: "public.passwordAuthentification",
        download: "public.passwordAuthentification", //'public.edit'
        share: "main.share",
        addSingles: "main.addToSingleClip",
      },
      options: [], //单曲夹/唱片夹弹框下拉
      dialogFormVisible: false, //弹窗
      dialogStatus: "", //编辑框界面切换
      //弹窗界面数据
      download: {
        roleId: "0", //待定
        account: "",
        password: "",
      },
      addSingles: {
        select: "",
        name: "",
      },
      currentSingle: [
        {
          name: "", // 单曲名(文件名)
          trackId: "", //单曲ID
          quality: "", //音质：320、192、hifi
        },
      ],
      downParams: {}, //下载参数
      isQrcode: false, //是否显示二维码
      qrcodeText: "",
    };
  },
  components: {
    Breadcrumb,
  },
  computed: {
    ...mapGetters([
      "loginStatu",
      "userInfo",
      "playing",
      "currentSong",
      "playLists",
    ]),
    rules() {
      return {
        account: [
          {
            required: true,
            message: this.$t("public.accountEmpty"),
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: this.$t("public.passwordEmpty"),
            trigger: "blur",
          },
        ],
        select: [
          {
            required: true,
            message: this.$t("public.selectSingles"),
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: this.$t("public.SinglesCannotEmpty"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  watch: {},
  created() {
    this.getSongSheetInfo();
  },
  mounted() {},
  methods: {
    ...mapMutations({
      setPlayList: "SET_PLAYLIST",
      setDialogLogin: "SET_DIALOGLOGIN",
      setPlayParentId: "SET_PLAY_PARENT_ID",
      setPlayClipId: "SET_PLAY_CLIP_ID",
    }),
    ...mapActions([
      // 点击选择播放
      "selectPlay",
      // 点击播放全部
      // "playAll",
      "playStatus",
      "savePlayList",
    ]),
    async getSongSheetInfo() {
      this.fullscreenLoading = true;
      try {
        let params = {
          songSheetId: this.$route.params.id,
        };
        let res = await this.$api.classical.getSongSheetInfo(params);
        this.fullscreenLoading = false;
        if (res.code === 1000000) {
          this.list = res.source ? res.source : {};
          // this.pageTotal = res.total
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 列表单选选中触发事件
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    //多选事件
    handleSelectionChange(val) {
      let arr = val.map((item) => {
        return this.utils.formatTimestamp(item.timing);
      });
      this.totalTiming = arr.reduce((total, num) => total + num, 0);
      this.multipleSelection = val;
    },
    async play(type, item) {
      // if (!this.loginStatu) {
      //   this.setDialogLogin(true);
      //   return;
      // }
      if (type == "play") {
        this.savePlayList({
          list: this.list.musicCompositions,
          location: "start",
        });
        this.selectPlay({
          list: this.playLists,
          index: item.trackId,
        });
        this.setPlayParentId(this.$route.params.id);
        this.setPlayClipId(null);
      } else if (type == "pause") {
        this.playStatus(false);
      }
    },
    openWorkName(idx) {
      if (idx == this.activeTrackId) {
        this.activeTrackId = -1;
      } else {
        this.activeTrackId = idx;
      }
      // this.isWorkName = !this.isWorkName;
    },
    // Confirm弹框
    openConfirm(type) {
      if (!this.loginStatu) {
        this.setDialogLogin(true);
        return;
      } else if (type == "addPlayList" && this.multipleSelection.length == 0) {
        this.$message({
          showClose: true,
          message: this.$t("public.selectAddSingle"),
          type: "warning",
        });
        return;
      }
      let text = "";
      if (type == "addPlayListAll") {
        text = this.$t("public.sureToAddPlaylistToPlaylist");
      } else if (type == "addPlayList") {
        text = this.$t("public.sureToAddToPlaylist");
      }
      this.$confirm(text, {
        confirmButtonText: this.$t("public.confirm"),
        cancelButtonText: this.$t("public.cancel"),
        showClose: false,
        center: true,
      })
        .then(async () => {
          // let addObj = {
          //   cover500: this.list.cover500 || this.list.cover200 || "",
          //   moduleId: this.list.moduleId,
          //   catalogueName: this.list.name,
          //   catalogueCname: this.list.cname || this.list.name,
          //   catalogueId: this.$route.params.id,
          // };
          if (type == "addPlayListAll") {
            this.savePlayList({
              list: this.list.musicCompositions,
              location: "end",
            });
            this.$message({
              showClose: true,
              message: this.$t("public.songMenuAddedPlaylist"),
              type: "success",
            });
          } else if (type == "addPlayList") {
            this.savePlayList({
              list: this.multipleSelection,
              location: "end",
            });
            this.$refs.singleTable.clearSelection();
            this.$message({
              showClose: true,
              message: this.$t("public.singleAddedPlaylist"),
              type: "success",
            });
          }
        })
        .catch((res) => {
          console.log(res);
        });
    },
    // 是否添加我喜欢   歌单
    async isLikeAlbum(id, status) {
      if (!this.loginStatu) {
        this.setDialogLogin(true);
        return;
      }
      let res;
      if (status) {
        let params = {
          contentIds: id,
          selectState: 2, //未全选
          type: 3, //歌单
        };
        res = await this.$api.user.cancelSongSheet(params);
        this.$message({
          showClose: true,
          message: this.$t("public.songMenuRemovedFavorites"),
          type: "warning",
        });
      } else {
        let params = {
          contentId: id,
          moduleId: 516,
          // type: 3, //歌单
        };
        res = await this.$api.user.addSongSheet(params);
        this.$message({
          showClose: true,
          message: this.$t("public.songMenuAddedFavorites"),
          type: "success",
        });
      }
      if (res.code === 1000000) {
        this.list.likeState = status == 1 ? 0 : 1;
      }
    },
    // 是否添加我喜欢   单曲
    async isLikeSingle(item) {
      if (!this.loginStatu) {
        this.setDialogLogin(true);
        return;
      }
      let res, playList;
      if (item.likeState) {
        let params = {
          contentIds: item.trackId,
          selectState: 2, //未全选
          type: 1,
        };
        res = await this.$api.user.cancelComposition(params);
        this.$message({
          showClose: true,
          message: this.$t("public.singleRemovedFavorite"),
          type: "warning",
        });
        // 引用类型数组 map改变了原始值
        playList = (this.playLists || []).map((val) => {
          if (val.trackId == item.trackId) {
            val.likeState = 0;
          }
          return val;
        });
      } else {
        let params = {
          contentId: item.trackId,
          moduleId: item.musicAlbum.moduleId || this.list.moduleId,
        };
        res = await this.$api.user.addComposition(params);
        this.$message({
          showClose: true,
          message: this.$t("public.singleAddedLikes"),
          type: "success",
        });
        playList = (this.playLists || []).map((val) => {
          if (val.trackId == item.trackId) {
            val.likeState = 1;
          }
          return val;
        });
      }
      if (res.code === 1000000) {
        this.getSongSheetInfo();
        localStorage.setItem("__playList__", JSON.stringify(playList));
      }
    },
    // 打开弹窗界面
    async openDialog(type, item) {
      if (!this.loginStatu) {
        this.setDialogLogin(true);
        return;
      }
      this.dialogStatus = type;
      let res;
      if (type == "share") {
        this.dialogFormVisible = true;
        return;
      } else if (type == "addSingles") {
        if (this.multipleSelection.length > 0) {
          res = await this.$api.user.getDirList({ type: 2 });
          if (res.code === 1000000) {
            if (res.source && res.source.length > 0) {
              this.options = res.source;
              this.options.unshift({
                name: this.$t("public.newSingles"),
                dirId: "0",
              });
              this.addSingles.select = "";
            } else {
              this.options = [
                {
                  name: this.$t("public.newSingles"),
                  dirId: "0",
                },
              ];
              this.addSingles.select = "0";
            }
            this.dialogFormVisible = true;
            this.$nextTick(() => {
              this.$refs.addSingles.resetFields();
              this.addSingles.name = "";
            });
          } else {
            // this.options.unshift({
            //   name: "新建文件夹",
            //   dirId: "0",
            // });
            // this.addSingles.select = "0";
            this.$message({
              showClose: true,
              message: this.$t("public.singleFolderFailed"),
              type: "warning",
            });
          }
        } else {
          this.$message({
            showClose: true,
            message: this.$t("public.selectAddSingle"),
            type: "warning",
          });
          return;
        }
      } else if (type == "download") {
        this.downParams = {
          downloadType: 511,
          contents: [
            {
              contentId: item.trackId,
              moduleId: 516,
            },
          ],
          theWay: 2, //1账号下载，2非账号下载
        };
        this.downInfo(this.downParams, type, item);
      } else if (type == "downloadAll") {
        if (item && item.length > 0) {
          this.downParams = {
            downloadType: 511,
            contents: item.map((i) => {
              return {
                contentId: i.trackId,
                moduleId: 516,
              };
            }),
            theWay: 2, //1账号下载，2非账号下载
          };
        } else {
          this.$message({
            showClose: true,
            message: this.$t("main.noSingleToDownload"),
            type: "error",
          });
          return false;
        }
        this.downInfo(this.downParams, type, item);
      }
    },
    // 保存不同下载信息
    async downInfo(params, type, item) {
      if (type === "download" && item) {
        let downInfo = {
          name:
            this.$i18n.locale === "zh"
              ? item.trackCtitle || item.trackTitle
              : item.trackTitle,
          trackId: item.trackId,
          quality:
            item.hifi == 1
              ? "hifi"
              : item.kbps320 == 1
              ? "320"
              : item.kbps192 == 1
              ? "192"
              : item.kbps64
              ? "64"
              : "",
        };
        this.currentSingle = [downInfo];
      } else if (type == "downloadAll" && item) {
        this.currentSingle = [];
        // 取专辑下的所有单曲的集合
        item.forEach((i) => {
          this.currentSingle.push({
            name:
              this.$i18n.locale === "zh"
                ? i.trackCtitle || i.trackTitle
                : i.trackTitle,
            trackId: i.trackId,
            quality:
              i.hifi == 1
                ? "hifi"
                : i.kbps320 == 1
                ? "320"
                : i.kbps192 == 1
                ? "192"
                : i.kbps64
                ? "64"
                : "",
          });
        });
      }
      let res = await this.$api.user.userDownloadCheck(params);
      // 不需要账密(不弹框)
      if (res.code === 1000000) {
        this.dialogFormVisible = false;
        this.createData(type);
      } else if (res.code === 1701001) {
        this.$message({
          showClose: true,
          message: this.$t("public.downFailed"),
          type: "error",
        });
      } else if (res.code === 1701002) {
        // 需要账密弹框
        this.dialogFormVisible = true;
        // 如果打开弹框 重置表单规则
        this.$nextTick(() => {
          this.$refs[type].resetFields();
        });
        this.downParams.theWay = 1;
      } else if (res.code === 1701003) {
        this.$message({
          showClose: true,
          message: this.$t("public.downBalanceInsufficient"),
          type: "error",
        });
      } else if (res.code === 1701004) {
        this.$message({
          showClose: true,
          message: this.$t("public.accountPasswordIncorrect"),
          type: "error",
        });
      } else if (res.code === 1000002) {
        this.$notify({
          title: this.$t("public.warning"),
          message: this.$t("public.classicalValidityExpires"),
          type: "warning",
          offset: 100,
        });
      }
    },
    //弹窗 提交按钮
    async createData(type) {
      // 需要输入账密验证
      if (this.dialogFormVisible) {
        this.$refs[type].validate(async (valid) => {
          if (valid) {
            //单曲夹
            if (type == "addSingles") {
              let params;
              if (this.addSingles.select === "0") {
                let param = {
                  name: this.addSingles.name,
                  type: 2,
                };
                let res = await this.$api.user.addDir(param);
                if (res.code === 1000000) {
                  params = {
                    userDirChildAdds: this.multipleSelection.map((item) => {
                      return Object.assign(
                        {},
                        {
                          moduleId:
                            item.musicAlbum.moduleId || this.list.moduleId,
                        },
                        { contentId: item.trackId }
                      );
                    }),
                    dirId: res.source,
                    type: 2,
                    // contentId: this.$route.params.id,
                    // moduleId: this.list.moduleId,
                  };
                } else if (res.code === 1700401) {
                  this.$message({
                    showClose: true,
                    message: this.$t("public.singleExists"),
                    type: "error",
                  });
                }
              } else {
                params = {
                  userDirChildAdds: this.multipleSelection.map((item) => {
                    return Object.assign(
                      {},
                      {
                        moduleId:
                          item.musicAlbum.moduleId || this.list.moduleId,
                      },
                      { contentId: item.trackId }
                    );
                  }),
                  dirId: this.addSingles.select,
                  type: 2,
                };
              }
              let result = await this.$api.user.addDirChild(params);
              if (result.code === 1000000) {
                this.$refs.singleTable.clearSelection();
                this.$message({
                  showClose: true,
                  message: this.$t("public.addSuccess"),
                  type: "success",
                });
                this.dialogFormVisible = false;
              } else {
                this.$message({
                  showClose: true,
                  message: this.$t("public.addFailed"),
                  type: "error",
                });
              }
            } else if (type == "download" || type == "downloadAll") {
              this.downParams.account = this.download.account;
              this.downParams.password = this.download.password;
              this.downInfo(this.downParams, type);
              return false;
            }
          }
        });
      } else {
        if (type == "download") {
          // 单个下载
          let param = {
            trackId: this.currentSingle[0].trackId,
            quality: this.currentSingle[0].quality,
            terminal: "Web",
          };
          let res = await this.$api.user.musicAddress(param);
          if (res.data) {
            this.dialogFormVisible = false;
            this.$message({
              showClose: true,
              message: this.$t("public.downloading"),
            });
            this.utils.downRow(res.data, this.currentSingle[0].name, "mp3");
          } else {
            this.$message({
              showClose: true,
              message: this.$t("public.addressFailed"),
              type: "error",
            });
          }
          return false;
        } else if (type == "downloadAll") {
          //批量下载
          this.dialogFormVisible = false;
          let batchArr = [];
          for (let item of this.currentSingle) {
            let res = await this.$api.user.musicAddress({
              trackId: item.trackId,
              quality: item.quality,
              terminal: "Web",
            });
            if (res.data) {
              batchArr.push({
                name: item.name,
                url: res.data,
              });
            }
            // URL获取失败提示
            // else {
            //   this.$message.error(item.name + this.$t("public.addressFailed"));
            // }
          }
          this.$message({
            showClose: true,
            message: this.$t("public.downloading"),
          });
          this.utils.batch(batchArr, "mp3");
          return false;
        }
      }
    },
    //分享功能
    share(type) {
      let url = `https://bshare.kuke.com/index.html?sourceType=2&sourceId=${this.list.songSheetId}&moduleId=516`;
      let info = {
        title:
          this.$i18n.locale == "zh"
            ? this.list.cname || this.list.name
            : this.list.name,
        url: encodeURIComponent(url),
        picurl: this.list.imgUrl,
      };
      let shareStr = "";
      switch (type) {
        case "weixin":
          document.getElementById("qrcode").innerHTML = "";
          this.isQrcode = true;
          this.qrcodeText = "wx";
          new QRCode("qrcode", {
            width: 200, // 设置宽度，单位像素
            height: 200, // 设置高度，单位像素
            text: url, //info.url, // 设置二维码内容或跳转地址
          });
          return;
        case "weibo":
          this.isQrcode = false;
          shareStr =
            "https://service.weibo.com/share/share.php?title=" +
            info.title +
            "&url=" +
            info.url +
            "&sharesource=" +
            "weibo" +
            "&pic=" +
            info.picurl +
            "&appkey=3371995706";
          break;
        case "qq":
          shareStr =
            "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" +
            info.url +
            "&sharesource=qzone&title=" +
            info.title +
            "&pics=" +
            info.picurl +
            "&summary=" +
            info.title;
          break;
        // document.getElementById("qrcode").innerHTML = "";
        // this.isQrcode = true;
        // this.qrcodeText = "qq";
        // new QRCode("qrcode", {
        //   width: 200, // 设置宽度，单位像素
        //   height: 200, // 设置高度，单位像素
        //   text:
        //     "https://bshare.kuke.com/index.html?sourceType=2" +
        //     "&sourceId=" +
        //     this.list.songSheetId +
        //     "&moduleId=" +
        //     516, //info.url, // 设置二维码内容或跳转地址
        // });
        // return;
        default:
          break;
      }
      window.open(
        shareStr,
        "newwindow",
        "height=600,width=800,top=100,left=100"
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.songList-detail {
  .main {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .box {
      background-color: #f5f5f5;
      height: 850px;
      > .box-top {
        height: 58px;
        padding: 0 16px;
        color: #000000;
        width: 100%;
        border-bottom: #e9e9e9 solid 1px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        > span {
          margin: 0 20px;
        }
        // .el-button,
        // .icon-button {
        //   margin-left: 56px;
        // }
      }
    }
    .left {
      width: 348px;
      font-size: 18px;
      > ul {
        li {
          margin: 24px 0;
          padding: 0 12px;
          line-height: 100%;
          display: flex;
          align-items: flex-start;
          font-weight: bold;
          span {
            max-width: 130px;
            white-space: nowrap;
          }
          p {
            max-width: 260px;
            color: #a1322c;
            margin-left: 10px;
          }
        }
      }
    }
    .right {
      width: calc(100% - 380px);
    }
  }
  .el-table {
    .isSingleName {
      margin-left: 30px;
      margin-top: 5px;
      font-size: 16px;
      color: #999999;
    }
    .icon-pause {
      display: none;
    }
    .playing {
      .icon-pause {
        display: flex;
      }
      .icon-play {
        display: none;
      }
    }
  }
}
.el-dialog {
  .dialogShare {
    // margin: 20px 0;
    display: flex;
    justify-content: space-around;
    > li {
      cursor: pointer;
      > img {
        width: 48px;
        height: 48px;
      }
    }
  }
  .share-dialog-footer {
    text-align: center;
    .clearBtn {
      width: 200px;
      margin-bottom: 20px;
    }
    .el-button--primary {
      display: none;
    }
  }
  .el-select {
    width: 100%;
  }
  .qrcodeText {
    margin: 10px 0;
    text-align: center;
    font-size: 22px;
  }
  #qrcode {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
